<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="套餐名称" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入套餐名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['setmeal:setmeal:add']"
        >新增套餐</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['setmeal:setmeal:remove']"
        >批量删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-view"
          size="mini"
          :disabled="multiple"
          @click="handleStatus([],0)"
          v-hasPermi="['setmeal:setmeal:status']"
        >批量上架</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-view"
          size="mini"
          :disabled="multiple"
          @click="handleStatus([],1)"
          v-hasPermi="['setmeal:setmeal:status']"
        >批量下架</el-button>
      </el-col>

    </el-row>
    <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    <el-table v-loading="loading" :data="setmealList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="套餐名称" align="center" prop="name" />
      <el-table-column label="图片" align="center" prop="image" width="100">
        <template slot-scope="scope">
          <image-preview :src="scope.row.image" :width="50" :height="50"/>
        </template>
      </el-table-column>
      <el-table-column label="菜品分类id" align="center" prop="categoryId">
        <template slot-scope="scope">
          <span v-for="item in clist">
            <span v-if="item.id == scope.row.categoryId">{{item.name}}</span>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="套餐价格" align="center" prop="price" />
      <el-table-column label="售卖状态 0:停用 1:启用" align="center" prop="status" >
        <template slot-scope="scope">
          <span v-if="scope.row.status==0">停用</span>
          <span v-if="scope.row.status==1">启用</span>
        </template>
      </el-table-column>
      <el-table-column label="最后操作时间" align="center" prop="updateTime" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['setmeal:setmeal:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['setmeal:setmeal:remove']"
          >删除</el-button>
          <span v-if="scope.row.status==0" style="margin-left: 10px">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-s-tools"
              @click="handleStatus(scope.row,0)"
              v-hasPermi="['setmeal:setmeal:status']"
            >启用</el-button>
          </span>
          <span v-if="scope.row.status==1" style="margin-left: 10px">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-s-tools"
              @click="handleStatus(scope.row,1)"
              v-hasPermi="['setmeal:setmeal:status']"
            >停用</el-button>
          </span>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改套餐对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="套餐名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入套餐名称" style="width: 250px" />
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="6">
            <el-form-item label="套餐分类" prop="price" style="width: 300px">
              <el-select v-model="form.categoryId" placeholder="请选择菜品分类">
              <el-option
                v-for="item in clist"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="套餐价格" prop="price">
          <el-input v-model="form.price" placeholder="请输入套餐价格" />
        </el-form-item>
        <div>
          <el-form-item label="套餐菜品:" class="setmealFood">
            <el-form-item>
              <div class="addDish">
                <span v-if="dishTable.length == 0" class="addBut" @click="openAddDish"> + 添加菜品</span>
                <div v-if="dishTable.length != 0" class="content">
                  <div class="addBut" style="margin-bottom: 20px" @click="openAddDish">+ 添加菜品</div>
                  <div class="table">
                    <el-table :data="dishTable" style="width: 100%">
                      <el-table-column prop="name" label="名称" width="180" align="center"></el-table-column>
                      <el-table-column prop="price" label="原价" width="180">
                        <template slot-scope="scope"> {{ Number(scope.row.price) / 100 }} </template>
                      </el-table-column>
                      <el-table-column prop="address" label="份数" align="center">
                        <template slot-scope="scope">
                          <el-input-number
                            v-model="scope.row.copies"
                            size="small"
                            :min="1"
                            :max="99"
                            label="描述文字"
                          ></el-input-number>
                        </template>
                      </el-table-column>
                      <el-table-column prop="address" label="操作" width="180px;" align="center">
                        <template slot-scope="scope">
                          <el-button type="text" size="small" @click="delDishHandle(scope.$index)"> 删除 </el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </div>
              </div>
            </el-form-item>
          </el-form-item>
        </div>
        <el-dialog
          title="添加菜品"
          class="addDishList"
          :visible.sync="dialogVisible"
          width="60%"
          :before-close="handleClose"
        >
          <el-input
            v-model="value"
            class="seachDish"
            placeholder="请输入菜品名称进行搜索"
            style="width: 250px"
            size="small"
            clearable
          >
            <i slot="prefix" class="el-input__icon el-icon-search" style="cursor: pointer" @click="seachHandle"></i>
          </el-input>
          <div class="addDishCon">
            <div class="leftCont">
              <div
                v-show="seachKey.trim() == ''"
                class="tabBut"
              >
              <span
                v-for="(item, index) in dishType"
                :key="index"
                :class="{act:index == keyInd}"
                @click="checkTypeHandle(index, item.id)"
              >{{ item.name }}</span>
              </div>
              <div class="tabList">
                <div class="table">
                  <div v-if="dishAddList.length == 0" style="padding-left:10px">
                    暂无菜品!
                  </div>
                  <el-checkbox-group
                    v-if="dishAddList.length > 0"
                    v-model="checkedList"
                    @change="checkedListHandle"
                  >
                    <div
                      v-for="(item, index) in dishAddList"
                      :key="index"
                      class="items"
                    >
                      <el-checkbox
                        :key="index"
                        :label="item"
                      >
                        <div class="item">
                          <span style="flex: 3;text-align: left">{{ item.dishName }}</span>
                          <span>{{ item.status == 0 ? '停售' : '在售' }}</span>
                          <span>{{ Number(item.price)/100 }}</span>
                        </div>
                      </el-checkbox>
                    </div>
                  </el-checkbox-group>
                </div>
              </div>
            </div>
            <div class="ritCont">
              <div class="tit">
                已选菜品({{ checkedList.length }})
              </div>
              <div class="items">
                <div
                  v-for="(item, ind) in checkedList"
                  :key="ind"
                  class="item"
                >
                  <span>{{ item.dishName }}</span>
                  <span class="price">￥ {{ Number(item.price)/100 }} </span>
                  <span
                    class="del"
                    @click="delCheck(ind)"
                  >
                  <img
                    src="src/images/icons/btn_clean@2x.png"
                  >
                </span>
                </div>
              </div>
            </div>
          </div>

          <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="addTableList">确 定</el-button>
        </span>
        </el-dialog>
        <el-form-item label="图片">
          <image-upload v-model="form.image"/>
        </el-form-item>
        <el-form-item label="描述信息" prop="description">
          <el-input v-model="form.description" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listSetmeal, getSetmeal, delSetmeal, addSetmeal, updateSetmeal , updateStatus , getCategoryList , queryDishList , selectDishListByDishName } from "@/api/setmeal/setmeal";
/*import { getCategoryList } from "@/api/category/category";*/
export default {
  name: "Setmeal",
  data() {
    return {
      id: '',
      actionType: '',
      value: '',
      setMealList: [],
      seachKey: '',
      dishList: [],
      imageUrl: '',
      dishTable: [],
      dialogVisible: false,
      checkList: [],
      ruleForm: {
        name: '',
        categoryId: '',
        price: '',
        code: '',
        image: '',
        description: '',
        dishList: [],
        status: true,
        idType: '',
      },
      dishType: [],
      dishAddList: [],
      dishListCache: [],
      keyInd : 0,
      searchValue: '',
      checkedList: [],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 子表选中数据
      checkedSetmealDish: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 套餐表格数据
      setmealList: [],
      // 套餐菜品关系表格数据
      setmealDishList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        categoryId: null,
        name: null,
        price: null,
        status: null,
        code: null,
        description: null,
        image: null,
        createUser: null,
        updateUser: null,
        isDeleted: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        categoryId: [
          { required: true, message: "菜品分类id不能为空", trigger: "blur" }
        ],
        name: [
          { required: true, message: "套餐名称不能为空", trigger: "blur" }
        ],
        price: [
          { required: true, message: "套餐价格不能为空", trigger: "blur" }
        ],
        createTime: [
          { required: true, message: "创建时间不能为空", trigger: "blur" }
        ],
        updateTime: [
          { required: true, message: "更新时间不能为空", trigger: "blur" }
        ],
        createUser: [
          { required: true, message: "创建人不能为空", trigger: "blur" }
        ],
        updateUser: [
          { required: true, message: "修改人不能为空", trigger: "blur" }
        ],
        isDeleted: [
          { required: true, message: "是否删除不能为空", trigger: "blur" }
        ]
      },
      statusSetmeal: [],
      clist: [],
    };
  },
  created() {
    this.getList();
    this.getDishTypeList();
    this.getDishType();
    /*this.id = requestUrlParam('id');*/
    this.actionType = this.id ? 'edit' : 'add'
    /*if (this.id) {
      this.init()
    }*/
  },
  watch:{
    seachKey(value){
      if (value.trim()){
        this.getDishForName(this.seachKey)
      }
    },
    checkList(value){
      this.checkedList = value
    }
  },
  methods: {
    // 删除
    delCheck (ind){
      this.checkedList.splice(ind, 1)
    },
    checkedListHandle (value) {
      this.getCheckList(this.checkedList)
    },
    // 获取添加菜品数据
    getCheckList(value) {
      this.checkList = [...value]
    },
    checkTypeHandle (ind,id) {
      this.keyInd = ind
      this.getDishList(id)
    },
    // 获取套餐分类
    getDishTypeList() {
      getCategoryList(2).then((res) => {
        if(res){
          this.setMealList = res.data
        }
        /*if (res.code === 1) {
          this.setMealList = res.data.map((obj) => ({ ...obj, idType: obj.id }))
        } else {
          this.$message.error(res.msg || '操作失败')
        }*/
      })

    },
    // 关键词收搜菜品列表分类
    getDishForName (name) {
      selectDishListByDishName(name).then(res => {
        if(res){
          let newArr = res.data
          newArr.forEach((n) => {
            n.dishId = n.id
            n.dishName = n.name
          })
          this.dishAddList = newArr
        }else{
          this.$message.error(res.msg)
        }
      })
      /*this.dishAddList =
      [{"code":"123456786543213456","description":"“广东烤鸭美而香，却胜烧鹅说古冈（今新会），燕瘦环肥各佳妙，君休偏重便宜坊”，可见烧鹅与烧鸭在粤菜之中已早负盛名。作为广州最普遍和最受欢迎的烧烤肉食，以它的“色泽金红，皮脆肉嫩，味香可口”的特色，在省城各大街小巷的烧卤店随处可见。","id":1397860242057375745,"image":"e476f679-5c15-436b-87fa-8c4e9644bf33.jpeg","name":"脆皮烧鹅","params":{},"price":12800.00,"sort":0,"status":1},{"code":"12345678654","description":"白切鸡是一道色香味俱全的特色传统名肴，又叫白斩鸡，是粤菜系鸡肴中的一种，始于清代的民间。白切鸡通常选用细骨农家鸡与沙姜、蒜茸等食材，慢火煮浸白切鸡皮爽肉滑，清淡鲜美。著名的泮溪酒家白切鸡，曾获商业部优质产品金鼎奖。湛江白切鸡更是驰名粤港澳。粤菜厨坛中，鸡的菜式有200余款之多，而最为人常食不厌的正是白切鸡，深受食家青睐。","id":1397860578738352129,"image":"9ec6fc2d-50d2-422e-b954-de87dcd04198.jpeg","name":"白切鸡","params":{},"price":6600.00,"sort":0,"status":1},{"code":"213456432123456","description":"广式烧乳猪主料是小乳猪，辅料是蒜，调料是五香粉、芝麻酱、八角粉等，本菜品主要通过将食材放入炭火中烧烤而成。烤乳猪是广州最著名的特色菜，并且是“满汉全席”中的主打菜肴之一。烤乳猪也是许多年来广东人祭祖的祭品之一，是家家都少不了的应节之物，用乳猪祭完先人后，亲戚们再聚餐食用。","id":1397860792492666881,"image":"2e96a7e3-affb-438e-b7c3-e1430df425c9.jpeg","name":"烤乳猪","params":{},"price":38800.00,"sort":0,"status":1},{"code":"1234563212345","description":"“脆皮乳鸽”是广东菜中的一道传统名菜，属于粤菜系，具有皮脆肉嫩、色泽红亮、鲜香味美的特点，常吃可使身体强健，清肺顺气。随着菜品制作工艺的不断发展，逐渐形成了熟炸法、生炸法和烤制法三种制作方法。无论那种制作方法，都是在鸽子经过一系列的加工，挂脆皮水后再加工而成，正宗的“脆皮乳鸽皮脆肉嫩、色泽红亮、鲜香味美、香气馥郁。这三种方法的制作过程都不算复杂，但想达到理想的效果并不容易。","id":1397860963880316929,"image":"3fabb83a-1c09-4fd9-892b-4ef7457daafa.jpeg","name":"脆皮乳鸽","params":{},"price":10800.00,"sort":0,"status":1},{"code":"1234567876543213456","description":"新鲜的海鲜，清蒸是最好的处理方式。鲜，体会为什么叫海鲜。清蒸是广州最经典的烹饪手法，过去岭南地区由于峻山大岭阻隔，交通不便，经济发展起步慢，自家打的鱼放在锅里煮了就吃，没有太多的讲究，但却发现这清淡的煮法能使鱼的鲜甜跃然舌尖。","id":1397861683434139649,"image":"1405081e-f545-42e1-86a2-f7559ae2e276.jpeg","name":"清蒸河鲜海鲜","params":{},"price":38800.00,"sort":0,"status":1},{"code":"123456786532455","description":"老火靓汤又称广府汤，是广府人传承数千年的食补养生秘方，慢火煲煮的中华老火靓汤，火候足，时间长，既取药补之效，又取入口之甘甜。 广府老火汤种类繁多，可以用各种汤料和烹调方法，烹制出各种不同口味、不同功效的汤来。","id":1397862198033297410,"image":"583df4b7-a159-4cfc-9543-4f666120b25f.jpeg","name":"老火靓汤","params":{},"price":49800.00,"sort":0,"status":1},{"code":"1234567865432","description":"上汤焗龙虾是一道色香味俱全的传统名菜，属于粤菜系。此菜以龙虾为主料，配以高汤制成的一道海鲜美食。本品肉质洁白细嫩，味道鲜美，蛋白质含量高，脂肪含量低，营养丰富。是色香味俱全的传统名菜。","id":1397862477831122945,"image":"5b8d2da3-3744-4bb3-acdc-329056b8259d.jpeg","name":"上汤焗龙虾","params":{},"price":108800.00,"sort":0,"status":1}]
 */   },
    // 保存添加菜品列表
    addTableList() {
      this.dishTable = JSON.parse(JSON.stringify(this.checkList))
      this.dishTable.forEach((n) => {
        n.copies = 1
      })
      this.dialogVisible = false
      // 添加处理逻辑清空选中list
      this.checkList = []
      this.setmealDishList = this.dishTable;
      /*console.log('dishAddList:'+JSON.stringify(this.dishAddList));
      console.log('setmealDishList:'+JSON.stringify(this.setmealDishList));
      console.log('setmealList:'+JSON.stringify(this.setmealList));
      console.log('dishTable:'+JSON.stringify(this.dishTable));*/

/*      alert(JSON.stringify(this.setmealDishList))
      alert(JSON.stringify(this.setmealList))*/
    },
    seachHandle() {
      this.seachKey = this.value
    },
    // 取消添加菜品
    handleClose(done) {
      // this.$refs.adddish.close()
      this.dialogVisible = false
      // this.checkList = JSON.parse(JSON.stringify(this.dishTable))
      // this.dialogVisible = false
    },
    /** 查询套餐列表 */
    getList() {
      getCategoryList(2).then(resp=>{
        if(resp){
          this.clist = resp.data;
        }
      })
      this.loading = true;
      listSetmeal(this.queryParams).then(response => {
        this.setmealList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 获取套餐分类
    getDishType () {
      getCategoryList(1).then(res => {
        if(res){
          this.dishType = res.data
          this.getDishList(res.data[0].id.toString())
        }
      })
    },
    // 通过套餐ID获取菜品列表分类
    getDishList (id) {
      queryDishList(id).then(res => {
        if(res){
          if (res.data.length == 0) {
            this.dishAddList = []
            return
          }
          let newArr = res.data;
          newArr.forEach((n) => {
            n.dishId = n.id
            n.copies = 1
            n.dishName = n.name
          })
          this.dishAddList = newArr
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        categoryId: null,
        name: null,
        price: null,
        status: 0,
        code: null,
        description: null,
        image: null,
        createTime: null,
        updateTime: null,
        createUser: null,
        updateUser: null,
        isDeleted: null
      };
      this.setmealDishList = [];
      this.resetForm("form");
    },
    // 添加菜品
    openAddDish() {
      this.seachKey = ''
      this.dialogVisible = true
      //搜索条件清空，菜品重新查询，菜品类别选第一个重新查询
      this.value = ''
      this.keyInd = 0
      this.getDishList(this.dishType[0].id.toString())
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.statusSetmeal = selection.map(item => item.status)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加套餐";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getSetmeal(id).then(response => {
        this.form = response.data;
        const id = JSON.stringify(this.form.categoryId)
        let name = '';
        this.clist.forEach(function (item1,index1){
          if(id == item1.id){
            name = item1.name;
          }
        })
        this.form.categoryName = name;
       console.log(JSON.stringify(this.form))
        this.setmealDishList = response.data.setmealDishList;
        this.dishTable = this.setmealDishList;
        this.open = true;
        this.title = "修改套餐";
      });
    },
    handleStatus(row,status){
      this.reset();
      const id = row.id || this.ids
      this.$modal.confirm('是否确认修改编号为"' + id + '"的数据项？').then(function() {
        return updateStatus(id,status)
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("修改成功");
      }).catch(() => {});
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.setmealDishList = this.setmealDishList;
          if (this.form.id != null) {
            updateSetmeal(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addSetmeal(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    // 删除套餐菜品
    delDishHandle(index) {
      this.dishTable.splice(index, 1)
      this.checkList.splice(index, 1)
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除套餐编号为"' + ids + '"的数据项？').then(function() {
        return delSetmeal(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
	/** 套餐菜品关系序号 */
    rowSetmealDishIndex({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },
    /** 套餐菜品关系添加按钮操作 */
    handleAddSetmealDish() {
      let obj = {};
      obj.dishId = "";
      obj.name = "";
      obj.price = "";
      obj.copies = "";
      obj.sort = "";
      obj.createUser = "";
      obj.updateUser = "";
      obj.isDeleted = "";
      this.setmealDishList.push(obj);
    },
    /** 套餐菜品关系删除按钮操作 */
    handleDeleteSetmealDish() {
      if (this.checkedSetmealDish.length == 0) {
        this.$modal.msgError("请先选择要删除的套餐菜品关系数据");
      } else {
        const setmealDishList = this.setmealDishList;
        const checkedSetmealDish = this.checkedSetmealDish;
        this.setmealDishList = setmealDishList.filter(function(item) {
          return checkedSetmealDish.indexOf(item.index) == -1
        });
      }
    },
    /** 复选框选中数据 */
    handleSetmealDishSelectionChange(selection) {
      this.checkedSetmealDish = selection.map(item => item.index)
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('setmeal/setmeal/export', {
        ...this.queryParams
      }, `setmeal_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
<style>
.addDish .el-input {
  width: 130px;
}
.addDish .el-input-number__increase {
  border-left: solid 1px #FFE1CA;
  background: #fff3ea;
}
.addDish .el-input-number__decrease {
  border-right: solid 1px #FFE1CA;
  background: #fff3ea;
}
.addDish input {
  border: 1px solid #ffe1ca;
}
.addDish .table {
  border: solid 1px #EBEEF5;
  border-radius: 3px;
}
.addDish .table th {
  padding: 5px 0;
}
.addDish .table td {
  padding: 7px 0;
}
.addDishList .seachDish {
  position: absolute;
  top: 10px;
  right: 20px;
}
.addDishList .el-dialog__body {
  padding: 0;
  border-bottom: solid 1px #ccc;
}
.addDishList .el-dialog__footer {
  padding-top: 27px;
}

.addDish {
  width: 777px;
}
.addDish .addBut {
  background: #ffc200;
  display: inline-block;
  padding: 0px 20px;
  border-radius: 3px;
  line-height: 40px;
  cursor: pointer;
  border-radius: 4px;
  color: #333333;
  font-weight: 500;
}
.addDish .content {
  background: #fafafb;
  padding: 20px;
  border: solid 1px #ccc;
  border-radius: 3px;
}
.addDishCon {
  padding: 0 20px;
  display: flex;
  line-height: 40px;
}
.addDishCon .leftCont {
  display: flex;
  border-right: solid 2px #E4E7ED;
  width: 60%;
  padding: 15px;
}
.addDishCon .leftCont .tabBut {
  width: 110px;
}
.addDishCon .leftCont .tabBut span {
  display: block;
  text-align: center;
  border-right: solid 2px #f4f4f4;
  cursor: pointer;
}
.addDishCon .leftCont .act {
  border-color: #FFC200 !important;
  color: #FFC200 !important;
}
.addDishCon .leftCont .tabList {
  flex: 1;
  padding: 15px;
}
.addDishCon .leftCont .tabList .table {
  border: solid 1px #f4f4f4;
  border-bottom: solid 1px #f4f4f4;
}
.addDishCon .leftCont .tabList .table .items {
  border-bottom: solid 1px #f4f4f4;
  padding: 0 10px;
  display: flex;
}
.addDishCon .leftCont .tabList .table .items .el-checkbox, .addDishCon .leftCont .tabList .table .items .el-checkbox__label {
  width: 100%;
}
.addDishCon .leftCont .tabList .table .items .item {
  display: flex;
  padding-right: 20px;
}
.addDishCon .leftCont .tabList .table .items .item span {
  display: inline-block;
  text-align: center;
  flex: 1;
}
.addDishCon .ritCont {
  width: 40%;
  padding: 0 15px;
}
.addDishCon .ritCont .item {
  box-shadow: 0px 1px 4px 3px rgba(0, 0, 0, 0.03);
  display: flex;
  text-align: center;
  padding: 0 10px;
  margin-bottom: 20px;
  border-radius: 6px;
  color: #818693;
}
.addDishCon .ritCont .item span:first-child {
  text-align: left;
  color: #20232A;
}
.addDishCon .ritCont .item .price {
  display: inline-block;
  flex: 1;
}
.addDishCon .ritCont .item .del {
  cursor: pointer;
}
.addDishCon .ritCont .item .del img {
  position: relative;
  top: 5px;
  width: 20px;
}

.addDishCon .el-checkbox__label{
  width: 100%;
}
#combo-add-app .setmealFood .el-form-item__label::before{
  content: '*';
  color: #F56C6C;
  margin-right: 4px;
}

#combo-add-app .uploadImg .el-form-item__label::before{
  content: '*';
  color: #F56C6C;
  margin-right: 4px;
}
</style>
